<template>
	<div class="hore-list">
		<button class="btn btn-primary" @click="goAdd">添加英雄</button>
		<hr />
		<table class="table table-striped">
			<thead>
				<tr>
					<th>ID</th>
					<th>英雄名称</th>
					<th>英雄性别</th>
					<th>创建时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in list" :key="item.id">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.gender}}</td>
					<td>{{item.time}}</td>
					<td>
						<button
							class="btn btn-success"
							style="margin-right:10px"
							@click="goEdit(item.id)"
						>编辑</button>
						<button  class="btn btn-danger" @click="del(item.id)">删除</button>
					</td>
				</tr>
        <!-- list数据为零的时候显示 -->
				<tr v-if="list.length === 0">
					<td colspan="5" style="text-align:center">暂无数据</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>

export default {
  data(){
    return {
      list:[]
    }
  },
  methods:{
    getList(){
      // 获取数据
      this.$request.get('http://localhost:6005/heroList').then(res=>{
        console.log(res)
        this.list = res.data
      })
    },
    del(id){
      // 调用接口完成删除
     this.$request.delete(`http://localhost:6005/heroList/${id}`).then(res=>{
        // 删除成功之后要干嘛？
        this.getList()
      })
		},
		goAdd(){
			// 路由跳转跳转到添加路由
			this.$router.push({
				path:'/heroAdd'
			})
		},
		goEdit(id){
			// 路由跳转跳转到编辑
			this.$router.push({
				path:'/heroEdit',
				query:{
					id
				}
			})
		}
  },
  mounted(){
    this.getList()
  }
}
</script>

<style>

</style>